<script setup>
import logo from '@/assets/imgs/logo.png'
import { useRouter } from 'vue-router'

import { h, onMounted, ref } from 'vue'
import { HomeOutlined, BellOutlined, CodeOutlined, UserOutlined } from '@ant-design/icons-vue'

import { useMeanItemStore } from '@/stores/meanItem'
const meanItemStore = useMeanItemStore()

const router = useRouter()

const current = meanItemStore.meanItem

let items = ref([
	{ key: 'home', icon: () => h(HomeOutlined), label: '首页', title: '首页' },
	{ key: 'creater', icon: () => h(CodeOutlined), label: '创作中心', title: '创作中心' },
	{ key: 'message', icon: () => h(BellOutlined), label: '消息中心', title: '消息中心' },
	{ key: 'login', icon: () => h(UserOutlined), label: '登录', title: '登录' },
])

onMounted(() => {
	const token = localStorage.getItem('token') || ''
	if (token) {
		let info = items.value.filter(item => item.key !== 'login')
		info.push({
			key: 'user',
			icon: () => h(UserOutlined),
			label: '管理员',
			title: '管理员',
			children: [
				{ label: '用户中心', key: 'userCenter' },
				{ label: '退出', key: 'logout' },
			],
		})
		items.value = info
	}
})

const selectMean = item => {
	// 退出
	if (item.key === 'logout') {
		// 移除Token
		localStorage.removeItem('token')
		// 菜单默认Item
		meanItemStore.setMeanItem('home')
		router.push({ name: 'login' })
		return
	}
	// 页面跳转
	router.push({ name: item.key })
	meanItemStore.setMeanItem(item.key)
}
</script>

<template>
	<a-affix>
		<a-flex justify="space-between" align="middle" class="header">
			<a-flex class="logo">
				<a-image :width="30" :src="logo" />
				<h2>我的简约博客</h2>
			</a-flex>
			<a-menu v-model:selectedKeys="current" mode="horizontal" :items="items" @click="selectMean" />
		</a-flex>
	</a-affix>
</template>

<style scoped>
.header {
	border-bottom: 2px solid #f0f0f0;
	box-sizing: border-box;
	background-color: #fff;
	opacity: 0.8;
}
.logo {
	display: flex;
	align-items: center;
}
.logo h2 {
	margin-left: 10px;
	position: relative;
	top: 4px;
}
</style>
